<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
	<head>
		<?php $this->load->view($cfg['tpl'].'public/meta')?>
	</head>

	<!-- body classes: 
			"boxed": boxed layout mode e.g. <body class="boxed">
			"pattern-1 ... pattern-9": background patterns for boxed layout mode e.g. <body class="boxed pattern-1"> 
	-->
	<body>
		<!-- scrollToTop -->
		<!-- ================ -->
		<div class="scrollToTop"><i class="icon-up-open-big"></i></div>

		<!-- page wrapper start -->
		<!-- ================ -->
		<div class="page-wrapper">

			<?php $this->load->view($cfg['tpl'].'public/header')?>

			<!-- page-intro start-->
			<!-- ================ -->
			<div class="page-intro">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<ol class="breadcrumb">
								<li><a href="<?=site_url('production')?>">Product Introduction</a></li>
								<li class="active"><?php echo $row['name']?></li>
							</ol>
						</div>
					</div>
				</div>
			</div>
			<!-- page-intro end -->

			<!-- main-container start -->
			<!-- ================ -->
			<section class="main-container">

				<div class="container">
					<div class="row">

						<!-- main start -->
						<!-- ================ -->
						<div class="main col-md-12">

							<!-- page-title start -->
							<!-- ================ -->
							<h1 class="page-title margin-top-clear"><?php echo $row['name']?></h1>
							<!-- page-title end -->

							<!-- Tab panes -->
							<div class="tab-content clear-style">
								<div class="tab-pane active" id="portfolio-images">
									<div class="owl-carousel content-slider-with-controls">
										<?php if(!empty($row['attachment'])){?>
										<?php foreach ($row['attachment'] as $k => $v) { ?>
										<div class="overlay-container1">
											<img src="<?php echo base_url($v['attachsourcepath'])?>" alt="">
											<a href="<?php echo base_url($v['attachsourcepath'])?>" class="popup-img overlay" title="image title"><i class="fa fa-search-plus"></i></a>
										</div>
										<?php }}else{?>
										<div class="overlay-container1">
											<img src="<?php echo base_url($row['sourceimage'])?>" alt="">
											<a href="<?php echo base_url($row['sourceimage'])?>" class="popup-img overlay" title="image title"><i class="fa fa-search-plus"></i></a>
										</div>
										<?php }?>
									</div>
								</div>
							</div>
						</div>
						<!-- main end -->
						<div class="col-md-12">
							<h3>Product Description</h3>
							<div class="separator-2"></div>
							<p><?php echo $row['intro']?></p>
						</div>
						<!-- page-wrapper end -->
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
										<h4 class="modal-title" id="myModalLabel">询盘</h4>
									</div>
									<div class="modal-body">
										<div class="alert alert-success hidden" id="contactSuccess3">
										<strong>成功!</strong> 感谢您的询价,我们会及时给您回复。
										</div>
										<div class="alert alert-error hidden" id="contactError3">
											<strong>失败!</strong> 递交失败，请重试。
										</div>
										<form class="form-horizontal" role="form" id="order_form">
											<div class="form-group">
												<label for="contact" class="col-sm-2 control-label">*称呼</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" id="contact" name="contact">
												</div>
											</div>
											<div class="form-group">
												<label for="email" class="col-sm-2 control-label">*Email</label>
												<div class="col-sm-10">
													<input type="email" class="form-control" id="email" name="email">
												</div>
											</div>
											<div class="form-group">
												<label for="company" class="col-sm-2 control-label">公司</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" id="company" name="company">
												</div>
											</div>
											<div class="form-group">
												<label for="address" class="col-sm-2 control-label">公司地址</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" id="address" name="address">
												</div>
											</div>
											<div class="form-group">
												<label for="tel" class="col-sm-2 control-label">*电话</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" id="tel" name="tel">
												</div>
											</div>
											<div class="form-group">
												<label for="fax" class="col-sm-2 control-label">传真</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" id="fax" name="fax">
												</div>
											</div>
											<div class="form-group">
												<label for="content" class="col-sm-2 control-label">*内容</label>
												<div class="col-sm-10">
													<textarea class="form-control" rows="3" id="content" name="content"></textarea>
												</div>
											</div>
											
											<div class="form-group">
												<div class="col-sm-offset-2 col-sm-10">
													<button type="submit" class="btn btn-default">提交</button>
													<button type="reset" class="btn btn-gray">重置</button>
												</div>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- main-container end -->

			<!-- section start -->
			<!-- ================ -->
			<!--<div class="section gray-bg clearfix">
				<div class="container">
					<div class="call-to-action">
						<div class="row">
							<div class="col-md-8">
								<h1 class="title text-center">Unlimited Options</h1>
								<p class="text-center">Sed ut Perspiciatis Unde Omnis Iste Sed ut sit  voluptatem accusan tium </p>
							</div>
							<div class="col-md-4">
								<div class="text-center">
									<a href="#" class="btn btn-default btn-lg">Purchase</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>-->
			<!-- section end -->

			<!-- section start -->
			<!-- ================ -->
			<div class="section clearfix">

				<div class="container">
					<div class="row">
						<div class="col-md-12">

							<h2>Related Products</h2>
							<div class="separator-2"></div>
							<!--<p>Sed ut Perspiciatis Unde Omnis Iste Sed ut sit  voluptatem accusan tium </p>-->
							<div class="owl-carousel carousel">
								<?php foreach ($related as $k => $v) {?>
								<div class="image-box">
									<div class="overlay-container">
										<img src="<?=base_url($v['imgthumb'])?>" alt="">
										<a href="<?=site_url('production/detail/'.$v['productid'])?>" class="overlay small">
											<i class="fa fa-link"></i>
											<span><?=$v['model']?></span>
										</a>
									</div>
									<a href="<?=site_url('production/detail/'.$v['productid'])?>" class="btn btn-light-gray btn-lg btn-block"><?=$v['name']?></a>
								</div>
								<?php }?>
							</div>

						</div>
					</div>
				</div>

			</div>
			<!-- section end -->

			<?php $this->load->view($cfg['tpl'].'public/footer')?>

		</div>
		<script>
		$("#order_form").validate({
				submitHandler: function(form) {

					var submitButton = $(this.submitButton);
					submitButton.button("loading");

					$.ajax({
						type: "POST",
						url: "<?=site_url('production/order')?>",
						data: {
							"title":"<?=$row['name']?>",
							"productid":"<?=$row['productid']?>",
							"contact": $("#contact").val(),
							"email": $("#email").val(),
							"company": $("#company").val(),
							"address": $("#address").val(),
							"tel": $("#tel").val(),
							"fax": $("#fax").val(),
							"content": $("#content").val()
						},
						dataType: "json",
						success: function (data) {
							if (data.code == "1") {

								$("#contactSuccess3").removeClass("hidden");
								$("#contactError3").addClass("hidden");

								// Reset Form
								$("#order_form .form-control")
									.val("")
									.blur()
									.parent()
									.removeClass("has-success")
									.removeClass("has-error")
									.find("label")
									.removeClass("hide")
									.parent()
									.find("span.error")
									.remove();

								if(($("#contactSuccess3").position().top - 80) < $(window).scrollTop()){
									$("html, body").animate({
										 scrollTop: $("#contactSuccess3").offset().top - 80
									}, 300);
								}

							} else {

								$("#contactError3").removeClass("hidden");
								$("#contactSuccess3").addClass("hidden");

								if(($("#contactError3").position().top - 80) < $(window).scrollTop()){
									$("html, body").animate({
										 scrollTop: $("#contactError3").offset().top - 80
									}, 300);
								}

							}
						},
						complete: function () {
							submitButton.button("reset");
						}
					});
				},				
				// debug: true,
				errorPlacement: function(error, element) {
					error.insertAfter( element );
				},
				onkeyup: false,
				onclick: false,
				rules: {
					contact: {
						required: true
					},
					email: {
						required: true,
						email: true
					},
					tel: {
						required: true
					},
					content: {
						required: true,
						minlength: 10
					}
				},
				messages: {
					contact: {
						required: "请输入您的称呼"
					},
					email: {
						required: "我们需要您的email以方便我们联系您",
						email: "请输入合法的email地址 例如 name@domain.com"
					},
					tel: {
						required: "请输入您的联系电话以方便我们联系您"
					},
					content: {
						required: "请输入详细内容",
						minlength: "请输入至少10个字符。"
					}					
				},
				errorElement: "span",
				highlight: function (element) {
					$(element).parent().removeClass("has-success").addClass("has-error");
				},
				success: function (element) {
					$(element).parent().removeClass("has-error").addClass("has-success");
				}
			});
		</script>
	</body>
</html>
